<template>
  <div class="loginDiv">
    <div class="msg">
      <div v-show="isMsg" ref="msgElement">
        <span>{{ msgText }}</span>
      </div>
    </div>
    <form>
      <table>
        <tbody>
          <tr>
            <td>
              <input type="text" placeholder="请输入用户名" v-model="username" autocomplete="off">
            </td>
          </tr>
          <tr>
            <td>
              <input type="password" placeholder="请输入密码" v-model="password" autocomplete="off">
            </td>
          </tr>
          <tr>
            <td>
              <input type="email" placeholder="请输入邮箱" v-model="email" autocomplete="off">
            </td>
          </tr>
          <tr>
            <td>
              <input type="button" value="注册" @click="btnRegister">
            </td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'

// 定义响应式变量
let isMsg = ref(false)
let username = ref('')
let password = ref('')
let email = ref('')
let msgText = ref('')
let msgElement = ref(null) // 用于操作消息提示框
let msgTimeout = null // 用于存储计时器引用

// 显示消息提示
const showMessage = (message, style) => {
  msgText.value = message
  isMsg.value = true
  if (msgElement.value) {
    msgElement.value.style.backgroundColor = style.backgroundColor
    msgElement.value.style.border = style.border
    msgElement.value.style.color = style.color
  }
  if (msgTimeout) clearTimeout(msgTimeout) // 清除之前的计时器
  msgTimeout = setTimeout(() => {
    isMsg.value = false
  }, 3000)
}

// 清空输入框
const clearInputs = () => {
  username.value = ''
  password.value = ''
  email.value = ''
}

// 注册逻辑
const btnRegister = () => {
  if (username.value.trim() === '' || password.value.trim() === '' || email.value.trim() === '') {
    showMessage('用户名、密码或邮箱不能为空', {
      backgroundColor: 'rgba(255, 0, 0, 0.33)',
      border: '1px solid rgb(255, 0, 0)',
      color: 'red'
    })
    clearInputs()
    return
  }

  axios({
    method: 'post',
    url: 'http://127.0.0.1:8000/api/user/register',
    data: {
      username: username.value,
      password: password.value,
      email: email.value
    }
  })
    .then(res => {
      showMessage(res.data.message, {
        backgroundColor: 'rgba(21, 255, 0, 0.33)',
        border: '1px solid rgb(21, 255, 0)',
        color: 'green'
      })
    })
    .catch(err => {
      showMessage(err.response.data.message, {
        backgroundColor: 'rgba(255, 0, 0, 0.33)',
        border: '1px solid rgb(255, 0, 0)',
        color: 'red'
      })
    })
  clearInputs()
}

defineExpose({
  clearInputs
})
</script>

<style scoped>
.loginDiv {
  width: 80%;
  height: 50%;
  margin: 30px auto;
}

.msg {
  height: 40px;
}

.msg>div {
  width: 90%;
  margin: 0 auto;
  line-height: 30px;
}

table,
tbody,
td {
  width: 100%;
}

table {
  margin-top: 20px;
}

td {
  height: 80px;
}

form input {
  width: 90%;
  height: 40px;
}

form [type="text"],
form [type="password"],
form [type="email"] {
  text-indent: 20px;
  transition: all 0.5s;
  outline: none;
  border-radius: 5px;
}

form [type="text"]:focus,
form [type="email"]:focus,
form [type="password"]:focus {
  border: 10px solid rgb(175, 183, 255);
}

form [type="text"]:not(:focus),
form [type="email"]:not(:focus),
form [type="password"]:not(:focus) {
  border: 1px solid rgb(0, 26, 255);
}

form [type="button"] {
  background-color: rgba(0, 183, 255, 0.293);
  border-radius: 5px;
  border: 2px solid blue;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

form [type="button"]:hover {
  background-color: rgba(102, 0, 255, 0.308);
  color: rgb(0, 4, 255);
}
</style>